<template>
	<div :class="[classes.reactWrap, 'colorBgContainer', 'borderRadius']">
		<div :class="[classes.title, 'colorTextBase']">交互插件</div>
		<div :class="classes.controlBox">
			<span v-for="item in ControlList" :key="item.type" :class="[classes.item, 'colorTextBase']" @click="handleReact(item.type)">
				<span :class="classes.icon">
					<component v-if="item.icon != ''" :is="item.icon" />
					<Icones v-else :icon="item.html" />
				</span>
				<span>{{ item.text }}</span>
			</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import classes from "./index.module.less"
import { IconThumbUp, IconMessage, IconBulb } from "@arco-design/web-vue/es/icon"
type ControlItem = {
	type: string
	text: string
	icon: any
	html?: string
}

const ControlList = ref<ControlItem[]>([
	{
		type: "like",
		text: "喜欢",
		icon: markRaw(IconThumbUp),
	},
	{
		type: "admiration",
		text: "赞赏",
		icon: "",
		html: "ant-design:transaction-outlined",
	},
	{
		type: "review",
		text: "评论",
		icon: markRaw(IconMessage),
	},
	{
		type: "barrage",
		text: "弹幕",
		icon: markRaw(IconBulb),
	},
])
const emits = defineEmits(["handleIneractClick"])
const handleReact = (type: string) => {
	emits("handleIneractClick", type)
}
</script>

<style scoped></style>

